<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>命名路由</title>
</head>

<body>
  <div id="root">
    <h1>声明式导航(路由名称 - 路由的name值)</h1>
    <!-- 根据路由地址来跳转 如果仅仅只是进行导航,那么可以使用路径-->
    <router-link to="/login" replace>登录</router-link>
    <!--  
      根据路由名称来跳转
        不加引号,去data里面找值.
        加: 当成一个变量处理
        不加: 当成一个字符串处理
        对象里面可写各种配置项,例如 query:{id:1001,username:'张三'}  params参数
     -->
    <!-- 不传参：如果需要传递参数(还有其他),那么必须使用对象写法 -->
    <router-link :to="{name:'register'}">注册</router-link>
    <!-- 地址栏由于params不会传参，中心组件可以获取到 -->
    <router-link :to="{name:'center',params:{id:1001,username:'张三'}}">中心name params</router-link>
    <!-- 地址栏由于query会传参，首页组件可以获取到 -->
    <router-link :to="{name:'index',query:{id:1002,username:'李四'}}" replace>首页name querys</router-link>

    <!-- 路径方式传参 -->
    <router-link :to="{path:'/shop',query:{id:1003,username:'王五'}}">购物车path query</router-link>
    <!-- 配置要求：name可以结合query和params来使用，但是path只能结合query来使用 -->
    <router-link :to="{path:'/collect',params:{id:1004,username:'马六'}}">收藏path params</router-link>

    <h1>编程式导航(路由名称 - 路由的name值)</h1>
    <button type="button" @click="doRedirect('photo')">图片</button>
    <button type="button" @click="doRedirect('search')">搜索</button>

    <router-view></router-view>
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/vue-router.js"></script>
  <script>
    // 定义组件
    let Login = {
      template: `<h1>我是登录组件</h1>`
    }
    let Register = {
      template: `<h1>我是注册组件</h1>`
    }
    let Center = {
      template: `<h1>我是中心组件------{{$route.params.username}}</h1>`
    }
    let Index = {
      template: `<h1>我是首页组件------{{$route.query.username}}</h1>`
    }
    let Shop = {
      template: `<h1>我是购物车组件------{{$route.query.username}}</h1>`
    }
    let Collect = {
      template: `<h1>我是收藏组件------{{$route.params.username}}</h1>`
    }
    let Photo = {
      template: `<h1>我是图片组件------{{$route.params.username}}</h1>`
    }
    let Search = {
      template: `<h1>我是搜索组件------{{$route.query.username}}</h1>`
    }

    // 定义路由列表
    let routes = [{
        // path: '/x/y/z/login',
        path: '/login',
        name: 'login',
        component: Login
      },
      {
        path: '/Register',
        name: 'register',
        component: Register
      },
      {
        path: '/center',
        name: 'center',
        component: Center
      },
      {
        path: '/index',
        name: 'index',
        component: Index
      },
      {
        path: '/shop',
        name: 'shop',
        component: Shop
      },
      {
        path: '/collect',
        name: 'collect',
        component: Collect
      },
      {
        path: '/photo',
        name: 'photo',
        component: Photo
      },
      {
        path: '/search',
        name: 'search',
        component: Search
      },
    ]

    // 创建路由器实例对象
    let router = new VueRouter({
      routes
    })

    // 创建Vue实例
    const vm = new Vue({
      el: '#root',
      data: {

      },
      methods: {
        doRedirect(str) {
          // 方式一：
          // this.$router.push('/' + str)
          // 方式二：
          this.$router.push({
            name: str,
            params: {
              id: 1006,
              username: '图片'
            },
            query: {
              id: 1001,
              username: '搜索'
            }
          })
        }
      },
      router //绑定路由器
    })


  </script>
</body>

</html>